<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<text class="text_1">第{{ datas.num }}次巡检</text>
				<view class="flex-col section_1">
					<text class="text_2">巡检工序：{{ datas.processName }}</text>
					<text class="text_3">巡检子项目：{{ datas.childProcessName }}</text>
					<text class="text_4">巡检时间：{{ datas.inspectionDate }}</text>
					<view class="divider">
						<!--*-->
					</view>
					<text class="text_5">评价</text>
					<view class="flex-row group_2">

						<!-- <view class="flex-col items-center text-wrapper"><text class="text_6">非常满意</text></view> -->
						<!-- <view class="flex-col items-center text-wrapper"><text class="text_6">非常满意</text></view> -->


						<view
							:class="[index == i ? 'flex-col items-center text-wrapper' : 'flex-col items-center text-wrapper_1']"
							v-for="(item, i) in list" :key="i" @click="clickItem(i)"><text
								class="text_7">{{ item.title }}</text>
						</view>


					</view>

					<u--textarea placeholderClass="zhanwei" class="flex-col items-start text-wrapper_2" maxlength="300" count  v-model="value1"
						border="none" confirmType="done" placeholder="请输入您的评价"></u--textarea>

                 
					<view class="flex-row group_3">
						<text class="text_12">添加照片</text>
						<text class="text_13">最多可上传9张</text>
					</view>

					<shop-upload :maxCount="9" :fileList="fileList" @success="success" @del="delectPic"></shop-upload>
				</view>
			</view>
			<view class="flex-col items-center button" @click="submits"><text class="text_14">确认</text></view>
		</view>
	</view>
</template>

<script>
	import path from 'path';

	export default {
		components: {},
		data() {
			return {
				index: 0,
				list: [{
						title: '非常满意'
					},
					{
						title: '满意'
					},
					{
						title: '一般'
					},
					{
						title: '不满意'
					},
				],
				value1: '',
				fileList: [],
				inspectionFrequencyId: '',
				datas: {},
				commentsLevel: '1'
			};
		},
		onLoad(option) {
			this.inspectionFrequencyId = option.id
		},
		onShow() {
			this.info()
		},
		methods: {
			
			clickItem(i) {
				console.log(i);
				this.index = i;
				this.commentsLevel = i + 1
			},
			
			success(file) {
				this.fileList.push(file);
			},
			delectPic(index) {
				this.fileList.splice(index, 1);
			},
			info() {
				this.$http('harryroom.viewInspectionFrequency', {
					inspectionFrequencyId: this.inspectionFrequencyId
				}).then(r => {
					if (r.code == 200) {
						this.datas = r.data
						// this.value1 = r.data.commentsDetails
						// this.index = r.data.status - 1
						if(r.data.commentsPictures)
						{
							this.fileList = JSON.parse(r.data.commentsPictures);
						}
						
					} else {
						this.$u.toast(r.msg);
						return;
					}
				});
			},
			submits() {
				var macTypeList = this.fileList
				let arr = []
				for (let i in macTypeList) {
					arr.push(macTypeList[i].url)
				}

				var info = {
				  inspectionFrequencyId: this.inspectionFrequencyId,
				  commentsDetails: this.value1,
				  commentsPictures: arr.join(','),
				  commentsLevel: this.commentsLevel
				};
				
				
				if (info.commentsDetails == '') {
				  this.$u.toast('请您输入评价');
				  return;
				}
				if (info.commentsPictures == '') {
				  this.$u.toast('请您上传图片');
				  return;
				}
				this.$http('harryroom.commentInspectionFrequency', info).then(r => {
				  
				  if (r.code == 200) {
					  setTimeout(()=>{
						  uni.showToast({
						  	title:r.msg,
							success() {
								uni.navigateBack({
									delta:2
								})
							}
						  })
					  })
				
				  } else {
				    this.$u.toast(r.msg);
				    return;
				  }
				});

		
			}
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .input-placeholder {
		padding: 0 10rpx;
	}
	
	/deep/ .uni-textarea-textarea {
		padding: 0 10rpx;
	}
	.text-wrapper_1 {
		// align-items: center;
		justify-content: center;
		margin-left: 7.5px;
		flex: 1 1 76px;
		padding: 5px 0 ;
		background-color: #f6f7f9;
		border-radius: 14px;
		// height: 28px;
	}

	.text_7 {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		// line-height: 14px;
	}

	.blue_text {
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 0 12px 32px;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 14.5px 0;
	}

	.button {
		margin: 25.5px 4px;
		padding: 15px 0 ;
		background-color: #1d6aff;
		border-radius: 22px;
	}

	.text_1 {
		align-self: flex-start;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.section_1 {
		margin-top: 17px;
		padding: 15px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.text_14 {
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_2 {
		align-self: flex-start;
		color: #333333;
		font-size: 13px;
		font-family: '.AppleSystemUIFont';
		line-height: 15px;
	}

	.text_3 {
		margin-top: 11.5px;
		align-self: flex-start;
		color: #333333;
		font-size: 13px;
		font-family: '.AppleSystemUIFont';
		line-height: 15px;
	}

	.text_4 {
		margin-top: 14.5px;
		align-self: flex-start;
		color: #333333;
		font-size: 13px;
		font-family: '.AppleSystemUIFont';
		line-height: 15px;
	}

	.divider {
		margin-top: 17.5px;
		background-color: #eeeeee;
		border-radius: 0.25px;
		height: 0.5px;
	}

	.text_5 {
		margin-top: 15px;
		align-self: flex-start;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_2 {
		margin-top: 16.5px;
	}

	.text-wrapper_2 {
		margin-top: 16px;
		padding: 11px 0 70.5px;
		background-color: #f6f7f9;
		border-radius: 8px;
	}

	.group_3 {
		padding: 15px 0 16.5px;
	}

	.image-wrapper {
		padding: 27.25px 0;
		align-self: flex-start;
		border-radius: 8px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836702818966983.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 78px;
	}

	.text-wrapper {
		padding: 5px 0 ;
		flex: 1 1 76px;
		border-radius: 14px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836691545194809.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		justify-content: center;
		// height: 28px;
	}

	.view_1 {
		margin-left: 8px;
	}

	.text_11 {
		margin-left: 13px;
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_12 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_13 {
		margin: 2px 0 1.5px 7.5px;
		color: #999999;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.image_1 {
		width: 23.5px;
		height: 23.5px;
	}

	.text_6 {
		color: #1d6aff;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}
</style>
